require(['./config'], () => {
    require(['swiper','template','url','header','snows'], (Swiper,template,url,header) => {
        class Index {
            constructor () {
                this.init()
                this.addfooter()
                this.addGood()
                this.setsnows()
                this.getcomment()
               
            }
            init(){
                var mySwiper = new Swiper('.swiper-container', {
                    autoplay:true,
                    
                    loop: true, // 循环模式选项
                    
                    // 如果需要分页器
                    pagination: {
                        el: '.swiper-pagination',
                    },
                    
                    // 如果需要前进后退按钮
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    },
                    
                    // 如果需要滚动条
                    scrollbar: {
                        el: '.swiper-scrollbar',
                    },
                }) 
            }
            addfooter(){
                $('footer').load('../html/footer.html')
            }
            addGood(){
                $.get(url.baseUrl + '/cake',resp =>{
                    if(resp.code == 200){
                        const {list} = resp.body
                        let res = list.filter(x => x.id <= 12)
                        this.renderGood(res)
                        header.cardCount()
                    }
                })
            }
            renderGood(list){
                $('.goodlist').html(template('goodli',{list}))
            }
            setsnows(){
                var body = $('body'),//雪花容器
                    src = './images/snow.png',//雪花图基本命名<图片名就是snow+1/2/3/4...>
                    num = 26,//雪花数量
                    style = 2;//图片种类数
                    
                goSnow(body,src,num,style);
            }

            getcomment(){
                $.get(url.baseUrl + '/comment',resp =>{
                    if(resp.code == 200){
                        let {ments} = resp.body;
                       
                        $('.commemtlist').html(template('usercomment',{ments}))
                        this.setcomment()
                        
                    }
                })
            }
            setcomment(){
                //获取#box ul img
                const $box = $('.comment'),
                        $ul = $box.children('ul'),
                        $imgs = $ul.children()

                //获取当前img的 个数、宽度
                const len = $imgs.length,
                        width = $imgs.eq(0).width() 

                //向li后面追加第一张图片，长度len+1 并改变 ul宽度
                $ul.append($imgs.eq(0).clone()).width((len + 1)*width)
                $ul.append($imgs.eq(1).clone()).width((len + 1)*width)



                //定义变量，保存当前点击index 和上次点击lastIndex
                var  index  =0 ,  lastIndex = 0 
                var  isMove = false      //移动状态，默认false



                //右边按钮添加事件，向右切换
                $('#goNext').on('click',function(){
                    //isMove为真(处于移动状态)，则不能进行下一次点击
                    if(isMove) return

                    //进入后isMove 为真
                    isMove = true

                    //把index赋值lastIndex
                    lastIndex = index

                    //当前index++
                    index++

                    //当index 等于添加进去的那张图下标，先移动到最后，运动结束后再让index = 0 回到最初
                    if(index === len){

                        $ul.animate({
                            left:-len * width
                        },300,function(){
                            //运动结束，改变ul状态，使它瞬移到第一张图
                            $ul.css('left',0)
                            isMove = false    //结束后isMove状态更改为 false
                        })

                        index = 0

                    }else{
                        $ul.animate({
                            left:-index * width
                        },1000 , function(){
                            isMove = false    //结束后isMove状态更改为 false
                        })
                    }
                })

                //左边按钮添加事件
                $('#goPrev').on('click',function(){
                    //isMove为真(处于移动状态)，则不能进行下一次点击
                    if(isMove) return
                    
                    //进入后isMove 为真
                    isMove = true

                    //把index赋值lastIndex
                    lastIndex = index

                    //index--
                    index--

                    //当index < 0，时，图片瞬移到倒数第一张(插入那张图片)，再向倒数第二张移动
                    if(index < 0){

                        index = len - 1

                        $ul.css('left',-len * width).animate({
                            left:-index * width
                        },1000 , function(){
                            isMove = false    //结束后isMove状态更改为 false
                        })

                    }else{
                        $ul.animate({
                            left: -index * width
                        },1000 , function(){
                            isMove = false    //结束后isMove状态更改为 false
                        })
                    }
                })

                //轮播图自动执行，当鼠标移入：轮播图停止移动，鼠标移出：正常移动
                $ul.hover(() =>{
                    //鼠标移入，清除定时器
                    clearInterval($ul.timer)
                    //鼠标移出，执行自调用函数move
                },( function move(){
                    $ul.timer = setInterval(() =>{
                        //自动执行#goNext 的click 函数
                        $('#goNext').trigger('click')
                    },3000)
                    return move
                })() )
                 
            }
        }
        new Index()
    })
})